<template>
  <div class="title fy-flex fy-flex__center">
    <img v-show="title == '今日设备报警次数'" :style="{'height': `${2.0}rem`}" src="../../assets/screen/icon_alarm.png"/>
    <img v-show="title == '接入单位总数'" :style="{'height': `${1.8 }rem`}" src="../../assets/screen/icon_building.png"/>
    <img v-show="title == '救援力量总数'" :style="{'height': `${2.0 }rem`}" src="../../assets/screen/icon_help.png"/>
    <img v-show="title == '已接入设备总数' || title == '接入设备总数'" :style="{'height': `${1.9 }rem`}" src="../../assets/screen/icon_equip.png"/>
    <img v-show="title == '第三方平台数量'" :style="{'height': `${1.5 }rem`}" src="../../assets/screen/icon_people.png"/>
    <h3 :style="{'font-size': `${2.2 }rem`, 'line-height': `${2.5 }rem`}">{{title}}</h3>
  </div>
</template>

<script>
export default {
  // 全局感知
  name: "",

  // 模板依赖
  components: {},
  filters: {},

  // 接口
  props: {
    title: String
  },

  // 本地状态
  data() {
    return {};
  },
  computed: {},
  // 事件
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  // 非响应式的属性
  methods: {}
};
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  img {
    margin: auto 1rem;
  }
  h3 {
    color: #f1e87c;
  }
}
</style>
